<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件管理</title>
    <th:block th:replace="~{commons/commons::head}"/>
    <link rel="stylesheet" href="/static/js/mui-player/mui-player.min.css"><!--视频播放css-->

    <script src="/static/js/vue/vue.min.js"></script><!--vue.js-->
    <script src="/static/js/mui-player/mui-player.min.js"></script><!--视频播放js-->
    <script src="/static/js/mui-player/mui-player-desktop-plugin.min.js"></script><!--视频播放pc支持-->
</head>
<style>
    .goBack{
        margin-top: 20px;
        text-align: center;
    }
    .progress{
    !important;background-color: transparent;
    }
</style>
<body>

<div th:replace="~{commons/commons::top}"></div>

<div id="app">
    <div class="container-fluid">

        <div class="container" style="margin-top: 10px">
            <div class="row">
                <p class="lead" th:text="${myFile.fileName}"></p>
            </div>
            <div class="row" >
                <div class="col-md-10 col-md-offset-1" >

                    <div style="height: 700px">
                        <!-- 指定播放器容器 -->
                        <div id="mui-player" style="height: 100%;!important;">
                            <!--头部按钮-->
                            <template slot="castScreen">
                                <svg t="1573891279687" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3272" width="20" height="20"><path d="M853.015273 814.545455h-161.419637a34.909091 34.909091 0 0 1 0-69.818182h161.419637A54.690909 54.690909 0 0 0 907.636364 690.106182V264.075636A54.690909 54.690909 0 0 0 853.015273 209.454545H170.961455A54.667636 54.667636 0 0 0 116.363636 264.075636v426.030546A54.667636 54.667636 0 0 0 170.961455 744.727273h141.358545a34.909091 34.909091 0 0 1 0 69.818182H170.961455A124.555636 124.555636 0 0 1 46.545455 690.106182V264.075636A124.555636 124.555636 0 0 1 170.961455 139.636364h682.053818A124.578909 124.578909 0 0 1 977.454545 264.075636v426.030546A124.578909 124.578909 0 0 1 853.015273 814.545455zM674.909091 907.636364H349.090909l162.909091-209.454546 162.909091 209.454546z" fill="#ffffff" p-id="3273"></path></svg>
                            </template>
                            <!--底部按钮-->
                            <template slot="nextMedia">
                                <svg t="1584686776454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1682" width="22" height="22"><path d="M783.14692466 563.21664097L240.85307534 879.55472126c-39.1656664 24.10194914-90.38230866-6.02548665-90.38230865-51.21664226v-632.676158c0-45.19115433 51.21664097-75.31859011 90.38230865-51.21664226l542.29384932 316.33808029c39.1656664 21.08920518 39.1656664 81.34407804 0 102.43328194z" p-id="1683" fill="#ffffff"></path><path d="M873.52923331 734.94302767c0 42.17841036-39.1656664 78.33133408-90.38230865 78.33133407s-90.38230866-36.15292371-90.38230735-78.33133407V289.05697233c0-42.17841036 39.1656664-78.33133408 90.38230735-78.33133407s90.38230866 36.15292371 90.38230865 78.33133407v445.88605534z" p-id="1684" fill="#ffffff"></path></svg>
                            </template>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="goBack">
            <a href="/file/fileList" class="btn btn-outline-success">
                返回
            </a>
        </div>
    </div>

</div>

<script th:inline="javascript">

    $(function() {

        /*消息弹窗全局配置*/
        Qmsg.config({
            showClose:true,
            timeout:2000,
            autoClose:true
        })

        $("#mui-player").hover(function () {
            //console.log(flag)
            mp.toggleControls()
        })

        let thumbnails = {
            preview:[], // 缩略图配置地址
            tile:[10,10], // 缩略图排列规则
            scale:[160,90], // 缩略片段图宽高比
        }

        for(let i=1;i <= [[${myFile.thumbnails}]] ;i++){
            let path = [[${myFile.filePath}]] + "";
            path = path.substring(0,path.lastIndexOf("/"))
            thumbnails.preview.push(path + "/thumbnail" + i + ".jpg")
        }

        // 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
        let mp = new MuiPlayer({
            container:'#mui-player',//指定播放器容器
            src:[[${myFile.filePath}]],
            title:[[${myFile.fileName}]],
            poster:[[${myFile.fileCover}]],//视频封面
            objectFit:"cover",//视频大小与 video 容器的表现形式。可选 contain | cover
            //themeColor:"#55c612",//进度条颜色
            width:"1200",//初始化播放器宽度
            height:700,
            autoplay:false,//是否自动播放
            preload:"auto",//视频是否预加载，可选值 none | metadata | auto。如果 autoplay=true，则忽略该属性。
            volume:0.5,//初始化设置视频音量，取值 0 - 1
            //autoFit:true,//播放器高度是否自适应视频高度
            dragSpotShape:"circula",//设置进度条拖动点的形状，可选 circula | square
            showMiniProgress:true,//是否显示底部迷你进度条，当视图操纵控件隐藏时显示。当配置项 live=true 时无效。
            custom:{
                headControls:[
                    {//自定义头部按钮
                        slot:'castScreen', // 对应定义的 slot 值
                        click:function(e) { // 按钮点击事件回调
                            console.log('cast screen button click...');
                        },
                        style:{}, // 自定义添加控件样式
                    }
                ],
                footerControls:[
                    {//自定义底部按钮
                        slot:'nextMedia', // 对应定义的 slot 值
                        position:'left', // 显示的位置，可选 left、right
                        tooltip:'下一集', // 鼠标悬浮在控件上显示的文字提示
                        oftenShow:false, // 是否常显示。默认为false，在 mobile 环境下竖屏状态下隐藏，pc环境判下视频容器小于500px时隐藏
                        click:function(e) { // 按钮点击事件回调
                            console.log('next media button click...');
                        },
                        style:{}, // 自定义添加控件样式
                    },
                ],
            },
            plugins:[
                new MuiPlayerDesktopPlugin({
                    thumbnails,//缩略图
                    contextmenu:[
                        {
                            name:'do something...',
                            context:'do something...',
                            zIndex:0,
                            show:true,
                            click:function(close) {
                                // Action...
                                close()
                            }
                        },
                    ],
                    customSetting:[
                        {
                            functions:'清晰度',
                            model:'select',
                            show:true,
                            zIndex:0,
                            leaveHiddenControls:true,//鼠标指针移出播放器时是否隐藏控件
                            childConfig:[
                                {functions:'蓝光1080P'},
                                {functions:'超清'},
                                {functions:'高清',selected:true},
                                {functions:'标清'},
                            ],
                            onToggle:function(data,selected,back) {
                                // Action
                            }
                        },
                    ],
                })
            ]
        })

        mp.showToast([[${myFile.fileNote}]]);// 显示一个消息提示
        mp.showLoading()//显示视频缓冲 loading

        //当用户在视频寻址时触发
        mp.on('seek-progress',function(percentage) {
            //console.log(percentage);
        });

        //controls 控件状态变化时触发
        mp.on('controls-toggle',function(show) {
            //console.log(show);
        });
    });


</script>
</body>
</html>
